import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
} from 'react-native';

import {
  HText,
  Divider,
  Navbar,
  Button,
  RootSiblings,
  Toast,
} from '../../DodLibrary/index';

class RootSiblingsPage extends Component {
  constructor(props) {
    super(props);

    this._toast1 = null;
  }

  // generate a new child
  _generate1 = () => {

    this._toast1 && this._toast1.destroy();

    this._toast1 = new RootSiblings(
      <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, justifyContent: 'center', alignItems: 'center' }}>
        <Button.Ripple>
          I am a generated one
        </Button.Ripple>
      </View>
    );
  };

  _destroy1 = () => {
    if (!this._toast1) {
      return;
    }
    this._toast1.destroy();
  };

  _update1 = () => {
    if (!this._toast1) {
      return;
    }
    this._toast1.update(
      <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, justifyContent: 'center', alignItems: 'center' }}>
        <Button.Ripple>
          I am a updated one
        </Button.Ripple>
      </View>
    );
  };



  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View style={styles.container}>
        <Navbar
          title="RootSiblings"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView
          contentContainerStyle={{
            alignItems: 'center',
          }}>
          <Divider />
          <HText.H14>
            This component can be used to <Text style={{ color: '#f00' }}>generated a component</Text> which is <Text style={{ color: '#f00' }}>out of the original tree</Text> ,
            it is useful when you want to add a component by call a function rather than putting every component to the render function
          </HText.H14>
          <Divider />
          <Button.Opacity
            onPress={this._generate1}>
            generate child1
          </Button.Opacity>
          <Divider />

          <Button.Opacity
            onPress={this._destroy1}>
            destroy child1
          </Button.Opacity>

          <Divider />

          <Button.Opacity
            onPress={this._update1}>
            update child1
          </Button.Opacity>
 
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default RootSiblingsPage;
